<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <!-- 生产环境中不建议使用 jsx babel转译库 将jsx转化为原生js -->
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
</head>
<body>
    <div id="example"></div>
        <script type="text/babel">
                class Clock extends React.Component{
                    constructor(props){
                        super(props);
                        this.state={date:new Date()};
                    }
                    // 每当 Clock 组件第一次加载到 DOM 中的时候，我们都想生成定时器，这在 React 中被称为挂载。
                    // 同样，每当 Clock 生成的这个 DOM 被移除的时候，我们也会想要清除定时器，这在 React 中被称为卸载。
                    render(){
                        return(
                            <div>
                                <h1>Hello world!</h1>
                                <h2>现在是{this.state.date.toLocaleTimeString()}</h2>   
                            </div>
                        );
                    }
                    componentDidMount(){
                        this.timerID=setInterval(()=>this.tick(),1000);
                    }
                    componentWillUnmount(){
                        clearInterval(this.timerID);
                    }
                    tick(){
                        this.setState({
                            date:new Date()
                        })
                    }
                }
                ReactDOM.render(
                    <Clock/>,
                    document.getElementById('example')
                );

                /*代码执行顺序：
                
                    当 <Clock /> 被传递给 ReactDOM.render() 时，React 调用 Clock 组件的构造函数。 由于 Clock 需要显示当前时间，所以使用包含当前时间的对象来初始化 this.state 。 我们稍后会更新此状态。

                    React 然后调用 Clock 组件的 render() 方法。这是 React 了解屏幕上应该显示什么内容，然后 React 更新 DOM 以匹配 Clock 的渲染输出。

                    当 Clock 的输出插入到 DOM 中时，React 调用 componentDidMount() 生命周期钩子。 在其中，Clock 组件要求浏览器设置一个定时器，每秒钟调用一次 tick()。

                    浏览器每秒钟调用 tick() 方法。 在其中，Clock 组件通过使用包含当前时间的对象调用 setState() 来调度UI更新。 通过调用 setState() ，React 知道状态已经改变，并再次调用 render() 方法来确定屏幕上应当显示什么。 这一次，render() 方法中的 this.state.date 将不同，所以渲染输出将包含更新的时间，并相应地更新 DOM。

                    一旦 Clock 组件被从 DOM 中移除，React 会调用 componentWillUnmount() 这个钩子函数，定时器也就会被清除。*/
        </script>   
</body>
</html>